<template>
    <div class="messages" v-if="messages.length">
        <div v-for="(m,index) in messages" :key="index">
            {{m.message}}
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            messages:[]  //数组里放着一个个的弹层
        }
    },
    mounted(){
        this.id = 0;
    },
    methods:{
        add(options){ //{}
            let id = this.id++;
            let layer = {...options,id};//某一个弹层的数据
            this.messages.push(layer);
            layer.timer = setTimeout(()=>{
                  this.remove(layer);  
            },options.duration)
        },
        remove(layer){ //移出某一个弹层
            clearTimeout(layer.timer);
            this.messages = this.messages.filter(message=>{
                return message.id!=layer.id
            })
        }
    }
}
</script>